Ext.define('Emp.view.dept.List', {
	extend: 'Emp.view.BaseList',
	alias: 'widget.deptlist',
	
	requires: [
		'Emp.store.DeptNode',
		'Emp.store.Dept',
		'Emp.ux.toolbar.GridToolbar',
		'Emp.ux.toolbar.Paging'
	],
	
	initComponent: function() {
		var me = this;

		var treeStore = Ext.create('Emp.store.DeptNode', {
			listeners: {
				scope: this,
				'beforeload': this.doBeforeLoad,
        		'load': this.doTreeLoad
			}
		});
		
		var gridStore = Ext.create('Emp.store.Dept', {
			listeners: {
				scope: this,
				'beforeload': this.doBeforeLoad,
        		'load': this.doLoad
			}
		});
		
		me.tree = Ext.create('Ext.tree.Panel', {
			region: 'west',
			width: 150,
			minWidth: 100,
			maxWidth: 200,
			split: true,
			collapsible: true,
			hideHeaders: true,
			useArrows: true,
			rootVisible: true,
			store: treeStore,
			columns: [{
				xtype: 'treecolumn',
				text: 'cnName',
				dataIndex: 'cnName',
				renderer: function(value, metaData, record) {
					return value + '(' + record.get('enName') + ')';
				},
				flex: 1
			}],
			tools: [{
				type: 'refresh',
				handler: function(event, toolEl, panel) {
					me.tree.store.load();
				}
			}]
		});
		
		me.grid = Ext.create('Ext.grid.Panel', {
			region: 'center',
			store: gridStore,
			selModel: Ext.create('Ext.selection.CheckboxModel'),
			columns: [{
					xtype: 'rownumberer',
					width: 40
				}, {
					header: 'id',
					dataIndex: 'id',
					hidden: true,
					hideable: false
				}, {
					header: 'parentId',
					dataIndex: 'parentId',
					hidden: true,
					hideable: false
				}, {
					header: '英文名',
					dataIndex: 'enName',
					width: 200
				}, {
					header: '中文名',
					dataIndex: 'cnName',
					width: 200
				}, {
					header: '状态',
					dataIndex: 'status',
					renderer: function(value) {
						return value === 'enable' ? '启用' : '停用';
					}
				}, {
					header: '排序',
					dataIndex: 'sort'
			}],
			dockedItems:[{
					xtype: 'gridtoolbar',
					dock: 'top'
				}, {
					xtype: 'paging',
					store: gridStore,
					dock: 'bottom',
        			displayInfo: true
			}]
		});
		Ext.apply(this, {
			layout: 'border',
			items: [me.tree, me.grid]
		});
		this.callParent();
	}
});